<template>
	<view class="card_item" @click="toInfo">
		<image :src="cardItem.banner" mode=""></image>
		<view class="card_title">{{cardItem.title}}</view>
		<view class="card_des">{{cardItem.dec}}</view>
		<view class="card_footer">
			<text class="sale">{{`¥ ${cardItem.sale} /${cardItem.unit || '次'}`}}</text>
			<text class="count">{{`${cardItem.count || 0}人参与`}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: ["cardItem"],
		methods:{
			toInfo: function() {
				const userInfo = uni.getStorageSync('userInfo').id
				if (userInfo) {
					uni.navigateTo({
						// url: `../TestPage/TestPage?testId=${this.cardItem.testId}`,
						url: `../TestPage/TestPage?testId=${3}`,
						// url: "../ResultPage/ResultPage",
						fail: (err) => {
							console.log(err)
						}
					})
				}else {
					uni.showToast({
						icon:'error',
						title: "请先登录"
					})
				}
				
			}
		}
	}
</script>

<style>
	.card_item {
		width: 100%;
		height: 500rpx;
		padding: 20rpx;
	}

	.card_item>image {
		width: 100%;
		max-height: 50%;
		margin: auto;
		display: block;
		border-radius: 20rpx 20rpx;
	}
	
	.card_title {
		margin-top: 15rpx;
		width: 95%;
		display: inline-block;
		padding: 0 15rpx;
		font-size: 16px;
		color: #000000;
		font-weight: 800;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.card_des {
		margin-top: 10rpx;
		width: 90%;
		/* display: inline-block; */
		padding: 0 15rpx;
		font-size: 14px;
		color: #8f9199;
		line-clamp: 2 !important;
		white-space: pre-wrap;
		display: -webkit-box;
		-webkit-line-clamp: 3; //此处为上限行数
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.card_footer {
		margin-top: 20rpx;
		width: 90%;
		display: flex;
		padding: 0 15rpx;
		justify-content: space-between;
	}
	
	.card_footer > text:last-child {
		font-size: 12px;
		color: #8f9199;
	}
	
	.card_footer > text:first-child {
		font-size: 16px;
		color: #F15F35;
	}
</style>
